<template>
  <div class="app-container">
    <div ref="filter" style="margin-bottom: unset" class="filter-container">
      <el-input
        v-model="listQuery.name"
        size="small"
        :placeholder="$t('common.enter', [$t('customer.groupName')])"
        style="width: 200px; margin-left: 5px"
        class="filter-item filter-left"
        clearable
      />
      <el-button
        size="small"
        class="filter-item filter-left"
        icon="el-icon-search"
        type="primary"
        style="margin-left: 5px"
        @click="search()"
        plain
      >
        {{ $t('common.search') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item left"
        type="primary"
        icon="el-icon-plus"
        style="margin-left: 5px"
        @click="addRow()"
      >
        {{ $t('customer.addGroup') }}
      </el-button>
      <el-button
        size="small"
        class="filter-item right filter-left filter-refresh"
        icon="el-icon-refresh"
        type="primary"
        plain
        @click="refresh()"
      />
    </div>
    <div ref="filter" class="filter-container">
      <el-button
        size="small"
        class="filter-item left"
        type="danger"
        icon="el-icon-delete"
        style="margin-left: 5px"
        @click="deleteSelection()"
      >
        {{ $t('customer.oneClickDelete') }}
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      fit
      border
      size="medium"
      :height="tableHeight"
      :header-cell-style="{ background: '#F2F6FC' }"
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" align="center" />
      <el-table-column
        align="center"
        :label="$t('common.id')"
        type="index"
        width="80"
      />
      <el-table-column :label="$t('common.name')" prop="name" align="center" />
      <el-table-column
        align="center"
        :label="$t('customer.belongTo')"
        v-if="currentUserInfo.userType == 3"
      >
        <template slot-scope="{ row }">
          {{ row.user ? row.user.trueName : $t('customer.empty') }}
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common.createTime')"
        prop="createdAt"
        align="center"
      />
      <el-table-column
        :label="$t('common.updateTime')"
        prop="updatedAt"
        align="center"
      />
      <el-table-column
        align="center"
        fixed="right"
        :label="$t('common.actions')"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            plain
            icon="el-icon-edit"
            @click="editRow(scope.row.id)"
            >{{ $t('common.edit') }}
          </el-button>

          <el-button
            type="danger"
            size="mini"
            plain
            icon="el-icon-delete"
            @click="deleteRow(scope.row.id)"
            >{{ $t('common.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />
    <Edit :id="id" :show.sync="showState" @closeAction="refresh" />
  </div>
</template>

<script>
import { deleteGroup, getList, deleteCollectGroup } from '@/api/customer/group'
import Edit from './edit'
import Pagination from '@/components/Pagination'
import { UserModule } from '@/store/modules/user'

export default {
  name: 'index',
  components: { Edit, Pagination },
  data() {
    return {
      currentUserInfo: UserModule,
      clientHeight: document.documentElement.clientHeight,
      clientWidth: document.documentElement.clientWidth,
      tableHeight: 'calc(100vh - 165px)',
      listLoading: true,
      listQuery: {
        name: '',
        limit: 20,
        page: 1,
      },
      list: [],
      showState: false,
      id: '',
      total: 0,
      selection: [],
    }
  },
  mounted() {
    this.fetchData()
    window.onresize = () => {
      this.clientHeight = document.documentElement.clientHeight
      this.clientWidth = document.documentElement.clientWidth
    }
  },
  updated() {
    this.setTableHeight()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const { data } = await getList(
        this.listQuery,
        this.listQuery.page,
        this.listQuery.limit
      )
      this.list = data.items
      this.total = data.total
      setTimeout(() => {
        this.listLoading = false
      }, 0.5 * 1000)
    },
    setTableHeight() {
      let height = 205
      if (this.total) {
        height = 245
      }
      this.tableHeight = 'calc(100vh - ' + height + 'px)'
      console.log(this.tableHeight)
    },
    refresh() {
      // 刷新重置条件
      this.listQuery = {
        name: '',
        limit: 20,
        page: 1,
      }
      this.showState = false
      this.fetchData()
    },
    search() {
      this.fetchData()
    },
    addRow() {
      this.id = ''
      this.showState = true
    },
    editRow(id) {
      this.id = id
      this.showState = true
    },
    handleSelection(val) {
      this.selection = val
    },
    deleteSelection() {
      if (this.selection.length <= 0) {
        this.$message({
          type: 'info',
          message: this.$t('customer.checkTagsNeedToDelete'),
        })
        return false
      }
      this.$confirm(
        this.$t('customer.confirmToDeleteCheckedData'),
        this.$t('common.tips'),
        {
          confirmButtonText: this.$t('common.confirm'),
          cancelButtonText: this.$t('common.cancel'),
          type: 'warning',
        }
      )
        .then(async () => {
          this.listLoading = true
          let ids = []
          for (let i in this.selection) {
            ids.push(this.selection[i].id)
          }
          await deleteCollectGroup(ids).then((res) => {
            this.$notify({
              title: this.$t('common.success'),
              message: this.$t('common.deleteSuccessfully'),
              type: 'success',
              duration: 2000,
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.fetchData()
        })
    },
    deleteRow(id) {
      this.$confirm(this.$t('customer.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning',
      })
        .then(async () => {
          this.listLoading = true
          await deleteGroup(id).then((res) => {
            this.$notify({
              title: this.$t('common.success'),
              message: this.$t('common.deleteSuccessfully'),
              type: 'success',
              duration: 2000,
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.fetchData()
        })
    },
  },
}
</script>

<style scoped></style>
